<template>
  <div class="w-e-container">
    <Toolbar
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
      style="border-bottom: 1px solid #ccc"
    />
    <Editor
      :defaultConfig="editorConfig"
      :mode="mode"
      style="min-height: 500px"
      v-model="valueHtml"
      @onCreated="handleCreated"
      @onChange="(editor) => emit('update:value', editor.getHtml())"
      @onDestroyed="handleDestroyed"
      @onFocus="handleFocus"
      @onBlur="handleBlur"
      @customAlert="customAlert"
      @customPaste="customPaste"
    />
  </div>
</template>
<script setup>
import {
  onBeforeUnmount,
  ref,
  shallowRef,
  onMounted,
  defineProps,
  watchEffect,
  watch,
  defineEmits,
} from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Upload, UploadMinio } from "@/api/common";
import { message } from "ant-design-vue";

const props = defineProps({
  value: {
    type: String,
    default: "",
  },
  mode: {
    type: String,
    default: "default",
  },
});
const emit = defineEmits(["update:value"]);
// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref(props.value);
const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: {
    uploadImage: {
      // 自定义上传
      async customUpload(file, insertFn) {
        // TS 语法
        // async customUpload(file, insertFn) {                   // JS 语法
        // file 即选中的文件
        // 自己实现上传，并得到图片 url alt href
        // 最后插入图片
        console.log(file);
        const formData = new FormData();
        formData.append("file", file);
        const { msg, data, success } = await UploadMinio(formData);
        console.log(data, msg);
        if (success) {
          // insertFn(
          //   "http://127.0.0.1:3000/" + data,
          //   data,
          //   "http://127.0.0.1:3000/" + data
          // );
          insertFn(data, data, data);
        } else {
          message.error("图片上传错误");
        }
      },
    },
  },
};

// 组件销毁时，也及时销毁编辑器，重要！
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
onMounted(() => {});

// 编辑器回调函数
const handleCreated = (editor) => {
  console.log("created", editor);
  editorRef.value = editor; // 记录 editor 实例，重要！
};
// 内容改变
const handleChange = (editor) => {
  console.log("change:", editor, editor.getHtml());
  // emit("change", editor.getHtml());
};
// 销毁
const handleDestroyed = (editor) => {
  console.log("destroyed", editor);
};
// 获取焦点
const handleFocus = (editor) => {
  console.log("focus", editor);
};
// 失去焦点
const handleBlur = (editor) => {
  console.log("blur", editor);
};
// 菜单栏点击
const customAlert = (info, type) => {
  alert(`【自定义提示】${type} - ${info}`);
};
// 粘贴
const customPaste = (editor, event, callback) => {
  console.log("ClipboardEvent 粘贴事件对象", event);

  // 自定义插入内容
  // editor.insertText("xxx");

  // 返回值（注意，vue 事件的返回值，不能用 return）
  // callback(false); // 返回 false ，阻止默认粘贴行为
  callback(true); // 返回 true ，继续默认的粘贴行为
};

// 插入文本
const insertText = () => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.insertText("hello world");
};

// 插入图片
const printHtml = () => {
  const editor = editorRef.value;
  if (editor == null) return;
  console.log(editor.getHtml());
};

// 禁用
const disable = () => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.disable();
};
</script>

<style lang="scss" scoped>
.w-e-container {
  border: 1px solid #ccc;
  :deep(.wangEditorStyle) {
    min-height: 300px;
  }
}
</style>